<template>
    <div class="drawer" @click="showDrawer">
        <DArrowLeft />
    </div>
    <el-drawer
        class="drawerContent"
        style="color: #011a27"
        v-model="drawer"
        title="I am the title"
        :with-header="false"
    >
        <div class="iconRight" @click="showDrawer">
            <DArrowRight />
        </div>
        <div class="drawerContent--date">
            <div class="selectDate">
                <div>请选择时间</div>
                <div>
                    <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择时间"
                        :default-value="new Date(2010, 9, 1)"
                    />
                </div>
            </div>
            <div class="selectSetting">
                <div>选择已有设置</div>
                <div>
                    <el-select
                        v-model="setting"
                        @change="getSetting"
                        placeholder="选择设置"
                        style="width: 240px"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                </div>
            </div>
            <div class="dataTable">
                <el-table
                    :data="curveShow"
                    style="width: 100%"
                    max-height="900"
                >
                    <el-table-column prop="name" label="曲线名称" width="180" />
                    <el-table-column label="偏移乘积" width="180">
                        <template #default="{ row }">
                            <el-input
                                v-model="row.offsetMultiplication"
                                size="small"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="偏移增加" width="180">
                        <template #default="{ row }">
                            <el-input
                                v-model="row.offsetIncrement"
                                size="small"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="是否展示" width="180">
                        <template #default="{ row }">
                            <el-switch
                                @change="curveVisible(row.index)"
                                v-model="row.visible"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-button class="button" @click="clickButton()" type="success"
                >确定偏移</el-button
            >
        </div>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
import { curveShow, visibility } from '../utils/csvUtils.js'
import { button, graph } from '../utils/dygraphs.js'

const drawer = ref(false)

function showDrawer() {
    drawer.value = !drawer.value
}

const clickButton = () => {
    const graphDiv = document.getElementById('graphDiv')
    button(graphDiv, graph, visibility)
}

const setting = ref()
const options = ['初始设置', '隐藏的线2', '倍乘的线2']
const value1 = ref('')

function getSetting() {
    if (setting.value === '初始设置') {
        curveShow.value = [
            {
                name: '线1',
                offsetMultiplication: 1,
                offsetIncrement: 500,
                visible: true,
            },
            {
                name: '线1',
                offsetMultiplication: 1,
                offsetIncrement: -200,
                visible: true,
            },
            {
                name: '线1',
                offsetMultiplication: 1,
                offsetIncrement: 0,
                visible: false,
            },
        ]
        visibility.value = curveShow.value.map((item) => item.visible)
    }
}

function curveVisible(index) {
    visibility.value[index - 1] = curveShow.value[index - 1].visible
}
</script>

<style scoped>
.drawer {
    position: absolute;
    width: 30px;
    height: 2%;
    top: 49%;
    right: 0;
    cursor: pointer;
    z-index: 1;
}

.iconRight {
    position: absolute;
    width: 30px;
    height: 2%;
    top: 49%;
    left: 0;
    cursor: pointer;
    color: #909399;
}

.drawerContent--date {
    position: absolute;
    width: calc(100% - 50px);
    height: 100%;
    right: 0;
}

.selectDate {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.selectSetting {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 5%;
}

.dataTable {
    position: absolute;
    top: 20%;
    overflow: scroll;
}

.button {
    width: 80px;
    position: absolute;
    top: 13%;
    left: 50%;
    margin-left: -40px;
}
</style>
